<template>
  <div class="overlay-page">
    <div class="visual-layout">
      <div class="grid-item visual-layout-head grid-item-1 flex align-center position-relative">
        <img class="title-img" src="../../../assets/title-img.png" alt="智慧能源信息平台">
        <visual-menu-button class="visual-menu-button"></visual-menu-button>
        <el-tooltip content="返回首页" effect="light">
          <el-button
            icon="el-icon-s-home" type="primary" circle
            style="margin-left: auto;z-index: 999;"
            @click="$router.push('/')"
          ></el-button>
        </el-tooltip>
      </div>
      <div class="grid-item grid-item-2">
        <div class="sub-grid">
          <div class="grid-item">
            <div class="flex-center width-100 height-100">
              <span class="text">综合能耗</span>
            </div>
          </div>
          <div class="grid-item">
            <div class="flex-center width-100 height-100">
              <span class="text">{{prevMonth}}月全市总消耗量：</span>
              <span class="value font-10">{{prevMonthConsumption}}</span>
              <span class="text margin-left">万吨标准煤</span>
            </div>
          </div>
          <div class="grid-item grid-x">
            <v-chart :option="chartOption1" style="width:100%;height:100%;"></v-chart>
          </div>
          <div class="grid-item grid-x">
            <div class="flex-center width-100 height-100">
              <div class="text">
                综合能耗较{{beforePrevMonth}}月{{consumptionProportion > 0 ? '增长' : '下降'}}
                <span class="value font-10">{{Math.abs(consumptionProportion)}}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-item grid-item-3">
        <map-center type="2"></map-center>
      </div>
      <div class="grid-item grid-item-4">
        <div class="sub-grid">
          <div class="grid-item grid-x">
            <div class="flex-center width-100 height-100">
              <div class="flex-shrink-0 flex-center direction-column height-100">
                <div class="focus-color font-10">重点用煤关注企业</div>
                <div class="text margin-top-10">
                  （{{prevMonth}}月用煤量第一企业）
                </div>
              </div>
              <div class="value font-6 margin-left">{{focusEnterprise2}}</div>
            </div>
          </div>
          <div class="grid-item grid-x">
            <el-carousel height="170px" :interval="6000">
              <el-carousel-item>
                <v-chart ref="chart5" :option="chartOption5" style="width:520px;height:170px;"></v-chart>
              </el-carousel-item>
              <el-carousel-item>
                <v-chart ref="chart5s" :option="chartOption5s" style="width:520px;height:170px;"></v-chart>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="grid-item grid-item-6">
        <div class="flex-center width-100 height-100">
          <div class="flex-shrink-0 flex-center direction-column height-100">
            <div class="focus-color font-10">重点综合能耗关注企业</div>
            <div class="text margin-top-10">
              （{{prevMonth}}月能耗第一企业）
            </div>
          </div>
          <div class="value font-6 margin-left">{{focusEnterprise1}}</div>
        </div>
      </div>
      <div class="grid-item grid-item-7">
        <div class="sub-grid">
          <div class="grid-item grid-x">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center width-100 height-100">
                <div class="flex-shrink-0 flex-center direction-column height-100">
                  <div class="focus-color font-10">重点用电关注企业</div>
                  <div class="text margin-top-10">
                    （{{prevMonth}}月用电量第一企业）
                  </div>
                </div>
                <div class="value font-6 margin-left">{{focusEnterprise3}}</div>
              </div>
            </div>
          </div>
          <div class="grid-item grid-x">
            <el-carousel height="170px" :interval="7000">
              <el-carousel-item>
                <v-chart ref="chart7" :option="chartOption7" style="width:520px;height:170px;"></v-chart>
              </el-carousel-item>
              <el-carousel-item>
                <v-chart ref="chart7s" :option="chartOption7s" style="width:520px;height:170px;"></v-chart>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="grid-item grid-item-8">
        <div class="sub-grid">
          <div class="grid-item grid-x">
            <v-chart :option="chartOption3" style="width:100%;height:100%;"></v-chart>
          </div>
          <div class="grid-item">
            <div class="flex align-center direction-column width-100 height-100 padding">
              <div class="text margin-top">
                {{prevMonth}}月全市用电量占比综合能耗较{{beforePrevMonth}}月{{electricConsumptionProportion > 0 ? '增长' : '下降'}}
              </div>
              <div class="value margin-top font-10">
                {{Math.abs(electricConsumptionProportion)}}%
                <svg-icon :style="{color: electricConsumptionProportion > 0 ? 'red' : 'green'}" :name="electricConsumptionProportion > 0 ? 'rising' : 'falling'"></svg-icon>
              </div>
            </div>
          </div>
          <div class="grid-item">
            <div class="flex align-center direction-column width-100 height-100 padding">
              <div class="text margin-top">
                {{prevMonth}}月全市用天然气量占比综合能耗较{{beforePrevMonth}}月{{gasConsumptionProportion > 0 ? '增长' : '下降'}}
              </div>
              <div class="value margin-top font-10">
                {{Math.abs(gasConsumptionProportion)}}%
                <svg-icon :style="{color: gasConsumptionProportion > 0 ? 'red' : 'green'}" :name="gasConsumptionProportion > 0 ? 'rising' : 'falling'"></svg-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-item grid-item-9">
        <div class="factories width-100 height-100 overflow-hidden">
          <div class="factories-wrap" ref="wrap">
            <div class="factory" v-for="(item, index) in enterpriseLists" :key="index">
              <router-link
                :to="{name: 'EnterpriseAnalysis', query: {
                  enterpriseCode: item.id,
                }}"
                class="link"
              >
                <dl>
                  <dt>{{item.name}}</dt>
                  <dd>用煤量：{{item.water}} {{getUnitName('water')}}</dd>
                  <dd>用电量：{{item.electric}} {{getUnitName('electric')}}</dd>
                  <dd>用气量：{{item.gas}} {{getUnitName('gas')}}</dd>
                  <dd>综合能耗：{{item.consumption}} {{getUnitName('other')}}</dd>
                </dl>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-item grid-item-10">
        <div class="sub-grid">
          <div class="grid-item grid-x">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center width-100 height-100">
                <div class="flex-shrink-0 flex-center direction-column height-100">
                  <div class="focus-color font-10">重点用天然气关注企业</div>
                  <div class="text margin-top-10">
                    （{{prevMonth}}月用天然气量第一企业）
                  </div>
                </div>
                <div class="value font-6 margin-left">{{focusEnterprise4}}</div>
              </div>
            </div>
          </div>
          <div class="grid-item grid-x">
            <el-carousel height="170px" :interval="8000">
              <el-carousel-item>
                <v-chart ref="chart9" :option="chartOption9" style="width:520px;height:170px;"></v-chart>
              </el-carousel-item>
              <el-carousel-item>
                <v-chart ref="chart9s" :option="chartOption9s" style="width:520px;height:170px;"></v-chart>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  loadLastMonthEnergyConsumptionEnterpriseTop,
  loadLastMonthAndOmaeMonthComprehensiveProportion,
  loadLastMonthAndOmaeMonthCityComprehensiveConsumption,
  loadLastMonthEnergyConsumptionTop,
  loadEnergyProportionComprehensiveEnergyConsumption,
  loadEnergyMonthOnMonthRatio,
  loadEnergyYearOverYear,
} from '@/api/energyDataManagement'
import VisualXxx from '@/mixins/visual-xxx'
import { COAL, ELECTRIC, GAS } from '@/config'
import { defaultNumber } from '@/utils'

// 同比,就是跟去年同期比;环比,就是跟上一个周期比
export default {
  name: 'visual-energy-data',
  mixins: [VisualXxx],
  data () {
    return {
      color1: '',
      color2: '',
      color3: '',

      prevMonth: new Date().getMonth(),
      year: new Date().getFullYear(),
      prevYear: new Date().getFullYear() - 1,

      // 关注综合能耗企业
      focusEnterprise1: '',
      // 关注煤能耗企业
      focusEnterprise2: '',
      // 关注电能耗企业
      focusEnterprise3: '',
      // 关注气能耗企业
      focusEnterprise4: '',

      // 上月综合能耗总消耗量
      prevMonthConsumption: '',
      // 上上月综合能耗总消耗量
      beforePrevMonthConsumption: '',
      // 上月综合能耗增长率
      consumptionProportion: '',

      // 上月电综合能耗量
      prevMonthElectricConsumption: '',
      // 上月气综合能耗量
      prevMonthGasConsumption: '',
      // 上月总综合能耗量
      prevMonthComprehensiveConsumption: '',

      // 上月电综合能耗增长率
      electricConsumptionProportion: '',
      // 上月气综合能耗增长率
      gasConsumptionProportion: '',

      // 上月用煤量
      prevMonthCoal: '',
      // 上上月用煤量
      beforeprevMonthCoal: '',
      // 煤环比
      waterProportion: '',
      // 同比上月用煤量
      overprevMonthCoal: '',
      // 煤同比
      overWaterProportion: '',

      // 上月用电量
      prevMonthElectric: '',
      // 上上月用电量
      beforePrevMonthElectric: '',
      // 电环比
      electricProportion: '',
      // 同比上月用电量
      overPrevMonthElectric: '',
      // 电同比
      overElectricProportion: '',

      // 上月用气量
      prevMonthGas: '',
      // 上上月用气量
      beforePrevMonthGas: '',
      // 气环比
      gasProportion: '',
      // 同比上月用气量
      overPrevMonthGas: '',
      // 气同比
      overGasProportion: '',
    }
  },
  computed: {
    beforePrevMonth () {
      const prevMonth = this.prevMonth
      return (prevMonth - 1) || 12
    },
    chartOption1 () {
      const { prevMonth, beforePrevMonth, prevMonthConsumption, beforePrevMonthConsumption } = this
      return {
        tooltip: {
          show: true,
          position: 'right',
          valueFormatter: (value) => `${defaultNumber(value)}万吨标准煤`
        },
        grid: {
          left: '2%',
          right: '90px',
          top: '2%',
          bottom: '20px',
        },
        xAxis: {
          type: 'value',
          name: '万吨标准煤',
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#3b67ac'
            }
          },
          axisLabel: {
            color: '#3b67ac'
          },
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#3b67ac'
            }
          },
        },
        series: [
          {
            type: 'bar',
            data: [
              {
                value: prevMonthConsumption,
                name: `${prevMonth}月全市综合能耗总消耗量`,
                itemStyle: {
                  color: '#6610f2'
                },
              },
              {
                value: beforePrevMonthConsumption,
                name: `${beforePrevMonth}月全市综合能耗总消耗量`,
                itemStyle: {
                  color: '#ffc107'
                },
              }
            ]
          }
        ]
      }
    },
    chartOption3 () {
      const { prevMonthElectricConsumption, prevMonthGasConsumption } = this
      return {
        tooltip: {
          show: true,
          // formatter: '{a}<br />{b}：{c}万吨标准煤（占比{d}%）'
          formatter: ({ name, value, color, percent }) => `
            <div style="margin: 0;line-height:1;">
              <div style="font-size:14px;color:#666;font-weight:400;line-height:1;">电、气能耗占比</div>
              <div style="margin: 10px 0 0;line-height:1;">
                <div style="margin: 0;line-height:1;"><span
                    style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span><span
                    style="font-size:14px;color:#666;font-weight:400;margin-left:2px">${name}</span><span
                    style="margin-left:20px;font-size:14px;color:#666;font-weight:900">${percent}%</span><span style="font-size:14px;color:#666;">（${value}吨标准煤）</span>
                  <div style="clear:both"></div>
                </div>
                <div style="clear:both"></div>
              </div>
              <div style="clear:both"></div>
            </div>
          `
        },
        series: [
          {
            name: '电、气能耗占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            data: [
              {
                value: prevMonthGasConsumption,
                name: '气能耗',
                itemStyle: {
                  color: '#6610f2'
                },
              },
              {
                value: prevMonthElectricConsumption,
                name: '电能耗',
                itemStyle: {
                  color: '#ffc107'
                },
              }
            ],
          }
        ]
      }
    },
    chartOption5 () {
      const { prevMonth, beforePrevMonth, year, prevMonthCoal, beforeprevMonthCoal, waterProportion } = this
      return this.getChartOption1({
        title: `${year}年${prevMonth}月全市用煤量环比${waterProportion > 0 ? '增长' : '下降'}${Math.abs(waterProportion)}%`,
        type: COAL,
        data: [
          {
            value: prevMonthCoal,
            name: `${prevMonth}月全市煤能耗总消耗量`,
            color: '#6610f2',
          },
          {
            value: beforeprevMonthCoal,
            name: `${beforePrevMonth}月全市煤能耗总消耗量`,
            color: '#6610f2',
          }
        ]
      })
    },
    chartOption5s () {
      const { prevMonth, year, prevYear, overprevMonthCoal, prevMonthCoal, overWaterProportion } = this
      return this.getChartOption1({
        title: `${year}年${prevMonth}月全市用煤量同比${overWaterProportion > 0 ? '增长' : '下降'}${Math.abs(overWaterProportion)}%`,
        type: COAL,
        data: [
          {
            value: prevMonthCoal,
            name: `${year}年${prevMonth}月全市煤能耗总消耗量`,
            color: '#ffc107',
          },
          {
            value: overprevMonthCoal,
            name: `${prevYear}年${prevMonth}月全市煤能耗总消耗量`,
            color: '#ffc107',
          }
        ]
      })
    },
    chartOption7 () {
      const { prevMonth, beforePrevMonth, year, prevMonthElectric, beforePrevMonthElectric, electricProportion } = this
      return this.getChartOption1({
        title: `${year}年${prevMonth}月全市用电量环比${electricProportion > 0 ? '增长' : '下降'}${Math.abs(electricProportion)}%`,
        type: ELECTRIC,
        data: [
          {
            value: prevMonthElectric,
            name: `${prevMonth}月全市电能耗总消耗量`,
            color: '#6610f2',
          },
          {
            value: beforePrevMonthElectric,
            name: `${beforePrevMonth}月全市电能耗总消耗量`,
            color: '#6610f2',
          }
        ]
      })
    },
    chartOption7s () {
      const { prevMonth, year, prevYear, prevMonthElectric, overPrevMonthElectric, overElectricProportion } = this
      return this.getChartOption1({
        title: `${year}年${prevMonth}月全市用电量同比${overPrevMonthElectric > 0 ? '增长' : '下降'}${Math.abs(overElectricProportion)}%`,
        type: ELECTRIC,
        data: [
          {
            value: prevMonthElectric,
            name: `${year}年${prevMonth}月全市电能耗总消耗量`,
            color: '#ffc107',
          },
          {
            value: overPrevMonthElectric,
            name: `${prevYear}年${prevMonth}月全市电能耗总消耗量`,
            color: '#ffc107',
          }
        ]
      })
    },
    chartOption9 () {
      const { prevMonth, beforePrevMonth, year, prevMonthGas, beforePrevMonthGas, gasProportion } = this
      return this.getChartOption1({
        title: `${year}年${prevMonth}月全市用天然气量环比${gasProportion > 0 ? '增长' : '下降'}${Math.abs(gasProportion)}%`,
        type: GAS,
        data: [
          {
            value: prevMonthGas,
            name: `${prevMonth}上月全市气能耗总消耗量`,
            color: '#6610f2',
          },
          {
            value: beforePrevMonthGas,
            name: `${beforePrevMonth}月全市气能耗总消耗量`,
            color: '#6610f2',
          }
        ]
      })
    },
    chartOption9s () {
      const { prevMonth, year, prevYear, prevMonthGas, overPrevMonthGas, overGasProportion } = this
      return this.getChartOption1({
        title: `${year}年${prevMonth}月全市用天然气量同比${overGasProportion > 0 ? '增长' : '下降'}${Math.abs(overGasProportion)}%`,
        type: GAS,
        data: [
          {
            value: prevMonthGas,
            name: `${year}年${prevMonth}月全市气能耗总消耗量`,
            color: '#ffc107',
          },
          {
            value: overPrevMonthGas,
            name: `${prevYear}年${prevMonth}月全市气能耗总消耗量`,
            color: '#ffc107',
          }
        ]
      })
    },
  },
  watch: {
    chartOption5 () {
      if (this.$refs.chart5) {
        this.$refs.chart5.resize()
      }
    },
    chartOption5s () {
      if (this.$refs.chart5s) {
        this.$refs.chart5s.resize()
      }
    },
    chartOption7 () {
      if (this.$refs.chart7) {
        this.$refs.chart7.resize()
      }
    },
    chartOption7s () {
      if (this.$refs.chart7s) {
        this.$refs.chart7s.resize()
      }
    },
    chartOption9 () {
      if (this.$refs.chart9) {
        this.$refs.chart9.resize()
      }
    },
    chartOption9s () {
      if (this.$refs.chart9s) {
        this.$refs.chart9s.resize()
      }
    },
  },
  mounted () {
    this.queryFocusEnterprise1()
    this.loadLastMonthAndOmaeMonthComprehensiveProportion()
    this.loadLastMonthAndOmaeMonthCityComprehensiveConsumption()
    this.loadLastMonthEnergyConsumptionTop()
    this.loadEnergyProportionComprehensiveEnergyConsumption()
    this.loadEnergyMonthOnMonthRatio()
    this.loadEnergyYearOverYear()
  },
  methods: {
    getChartOption1 (option = {}) {
      const unitName = this.getUnitName(option.type)
      return {
        title: {
          text: option.title,
          left: 'center',
          bottom: '20px',
          textStyle: {
            color: '#4b84e0',
            fontSize: 16,
            fontWeight: 'normal'
          },
        },
        tooltip: {
          show: true,
          valueFormatter: (value) => `${defaultNumber(value)}${unitName}`
        },
        grid: {
          left: '30px',
          right: '90px',
          top: '20px',
          bottom: '70px'
        },
        xAxis: {
          type: 'value',
          name: unitName,
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#3b67ac'
            }
          },
          axisLabel: {
            color: '#3b67ac'
          },
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#3b67ac'
            }
          },
        },
        series: [
          {
            type: 'bar',
            data: (option.data || []).map(v => ({
              name: v.name,
              value: v.value,
              itemStyle: {
                color: v.color,
              }
            }))
          }
        ]
      }
    },
    transferData (number) {
      if (number === undefined || number === '') {
        return ''
      }
      return Number((Number(number) / 10000).toFixed(2))
    },
    queryFocusEnterprise1 () {
      loadLastMonthEnergyConsumptionEnterpriseTop().then(res => {
        if (res.code === 200) {
          if (res.data) {
            this.focusEnterprise1 = res.data.name
          }
        }
      })
    },
    loadLastMonthAndOmaeMonthComprehensiveProportion () {
      loadLastMonthAndOmaeMonthComprehensiveProportion(ELECTRIC).then(res => {
        if (res.code === 200) {
          this.electricConsumptionProportion = res.data || ''
        }
      })
      loadLastMonthAndOmaeMonthComprehensiveProportion(GAS).then(res => {
        if (res.code === 200) {
          this.gasConsumptionProportion = res.data || ''
        }
      })
    },
    loadLastMonthAndOmaeMonthCityComprehensiveConsumption () {
      loadLastMonthAndOmaeMonthCityComprehensiveConsumption().then(res => {
        if (res.code === 200) {
          const { lastMonth, omaeMonth, proportion } = res.data || {}
          this.prevMonthConsumption = Number((Number(lastMonth) / 10000).toFixed(2))
          this.beforePrevMonthConsumption = Number((Number(omaeMonth) / 10000).toFixed(2))
          this.consumptionProportion = proportion
        }
      })
    },
    loadLastMonthEnergyConsumptionTop () {
      loadLastMonthEnergyConsumptionTop(COAL).then(res => {
        if (res.code === 200) {
          this.focusEnterprise2 = res.data?.name
        }
      })
      loadLastMonthEnergyConsumptionTop(ELECTRIC).then(res => {
        if (res.code === 200) {
          this.focusEnterprise3 = res.data?.name
        }
      })
      loadLastMonthEnergyConsumptionTop(GAS).then(res => {
        if (res.code === 200) {
          this.focusEnterprise4 = res.data?.name
        }
      })
    },
    loadEnergyProportionComprehensiveEnergyConsumption () {
      loadEnergyProportionComprehensiveEnergyConsumption().then(res => {
        if (res.code === 200) {
          this.prevMonthElectricConsumption = this.transferData(res.data?.electricEnergyConsumption)
          this.prevMonthGasConsumption = this.transferData(res.data?.gasEnergyConsumption)
          this.prevMonthComprehensiveConsumption = this.transferData(res.data?.comprehensiveEnergyConsumption)
        }
      })
    },
    loadEnergyMonthOnMonthRatio () {
      loadEnergyMonthOnMonthRatio(COAL).then(res => {
        if (res.code === 200) {
          this.prevMonthCoal = res.data?.lastMonth
          this.beforeprevMonthCoal = res.data?.omaeMonth
          this.waterProportion = res.data?.proportion
        }
      })
      loadEnergyMonthOnMonthRatio(ELECTRIC).then(res => {
        if (res.code === 200) {
          this.prevMonthElectric = res.data?.lastMonth
          this.beforePrevMonthElectric = res.data?.omaeMonth
          this.electricProportion = res.data?.proportion
        }
      })
      loadEnergyMonthOnMonthRatio(GAS).then(res => {
        if (res.code === 200) {
          this.prevMonthGas = res.data?.lastMonth
          this.beforePrevMonthGas = res.data?.omaeMonth
          this.gasProportion = res.data?.proportion
        }
      })
    },
    loadEnergyYearOverYear () {
      loadEnergyYearOverYear(COAL).then(res => {
        if (res.code === 200) {
          this.prevMonthCoal = res.data?.lastMonth
          this.overprevMonthCoal = res.data?.omaeMonth
          this.overWaterProportion = res.data?.proportion
        }
      })
      loadEnergyYearOverYear(ELECTRIC).then(res => {
        if (res.code === 200) {
          this.prevMonthElectric = res.data?.lastMonth
          this.overPrevMonthElectric = res.data?.omaeMonth
          this.overElectricProportion = res.data?.proportion
        }
      })
      loadEnergyYearOverYear(GAS).then(res => {
        if (res.code === 200) {
          this.prevMonthGas = res.data?.lastMonth
          this.overPrevMonthGas = res.data?.omaeMonth
          this.overGasProportion = res.data?.proportion
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/variable.scss";

.visual-layout {
  grid-template-rows: 6.5vh 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(7, 1fr);
}
.grid-item-1 {
  grid-column-start: 1;
  grid-column-end: 8;
}
.grid-item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
.grid-item-3 {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 6;
}
.grid-item-4 {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 6;
  grid-column-end: 8;
}
.grid-item-5 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 3;
}
.grid-item-6 {
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: 3;
}
.grid-item-7 {
  grid-row-start: 4;
  grid-row-end: 6;
  grid-column-start: 6;
  grid-column-end: 8;
}
.grid-item-8 {
  grid-row-start: 5;
  grid-row-end: 8;
  grid-column-start: 1;
  grid-column-end: 3;
}
.grid-item-9 {
  grid-row-start: 6;
  grid-row-end: 8;
  grid-column-start: 3;
  grid-column-end: 6;
}
.grid-item-10 {
  grid-row-start: 6;
  grid-row-end: 8;
  grid-column-start: 6;
  grid-column-end: 8;
}
.grid-item-15 {
  grid-row-start: 5;
  grid-row-end: 6;
  grid-column-start: 3;
  grid-column-end: 5;
}
.grid-item-2 {
  background: transparent;
  padding: 0;
  .sub-grid {
    grid-template-columns: 10vh 1fr;
    grid-template-rows: 5.5vh 1fr 5.5vh;
    grid-gap: 1px;
    .grid-x {
      grid-column-start: 1;
      grid-column-end: 3;
    }
  }
}
.sub-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-gap: $gutter;
}
.grid-item-8 {
  background: transparent;
  padding: 0;
  .sub-grid {
    grid-gap: 1px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3fr 2fr;
    .grid-item {
      padding: 0;
    }
    .grid-x {
      grid-column-start: 1;
      grid-column-end: 3;
    }
  }
}
.grid-item-10,
.grid-item-7,
.grid-item-4 {
  background: transparent;
  padding: 0;
  .sub-grid {
    grid-gap: $gutter;
    grid-template-rows: 8.4vh 1fr;
    grid-template-columns: repeat(2, 1fr);
    .grid-item {
      padding: 0;
    }
    .grid-x {
      grid-column-start: 1;
      grid-column-end: 3;
    }
  }
}
.grid-item-9 {
  padding: 0;
  background: transparent;
}
</style>
